

<html>
 <head>
 	<title></title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 	<script type="text/javascript" src="<?php echo base_url();?>template/js/jquery.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
   <script type="text/javascript" src="<?php echo base_url().'third_party/rochaScroll/slimScroll.min.js'; ?>"></script>
  <script type="text/javascript" src="<?php echo base_url().'third_party/johnyer/mediaelement-and-player.min.js'; ?>"></script>
 <link rel="stylesheet" href="<?php echo base_url().'third_party/johnyer/mediaelementplayer.min.css' ?>">


<style type="text/css">

 
#mediaplayer  {
  width: 600px;
  height: auto;
  border:1px solid black;

}
   #listsong {
  border:1px solid #e8e8e8;
 }
#playlist {
  padding: 5px 5px 5px 10px;
  margin:0px;
  overflow: scroll;
  -ms-overflow-x: hidden;
  overflow-x: hidden;
  height: 80px;
  background-color: #171717;
}
 #playlist li {
  color: #fff;
  list-style: none;
  margin: 0px;
  padding: 7px 5px 0px 5px;
  cursor: pointer;
  border-bottom: 1px solid #e8e8e8;
  height: 25px;
 }
  #playlist li:hover {
    background-color: #2e2e2e;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
  }
  #bannerplay {
    position: relative;
  }
  #backgroud {
    position: absolute;
    bottom: 0px;
    background-color: #2e2e2e;
    height: 30px;
    width: 600px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
  }
  #info-songitem {
    position: absolute;
    bottom: 0px;
    padding: 10px 10px 3px 10px;
    height: 20px;
    width: 580px;
  
  }
  #info-songitem:hover {
    cursor: pointer;
  }
    #info-songitem a {
      color: 54c5ff;
      text-decoration: none;
    }
   span.infor-lable {
    color: #f6f7f8;
   } 
</style>
 </head>

 <body>
<br><br>
 <div id="mediaplayer" >
  <div id=bannerplay>
    <img src="<?php echo base_url().'template/image/bannerplay.png'; ?>" height="150px" width="600px" alt="I Love Music">
    <div id="backgroud"> </div>
    <div id="info-songitem"><span class="infor-lable">Bài Hát: </span><a href="">Nơi Tình Yêu Băt Đầu</a> <span class="infor-lable">|</span> <span class="infor-lable"> Ca Sỹ: </span>  <a href="">Bằng Kiều </a> <span class="infor-lable">-</span> <a href="">Lam Anh</a> </div>
  </div>
  <div id="control-media">
    <audio id="player2"  autoplay="autoplay" data-current="1" src="<?php echo base_url().'upload/song/Noi Tinh Yeu Bat Dau.mp3' ?>" preload type="audio/mp3" controls="controls" width="600px">    
    </audio>
  </div>
  <div id="listsong" >
    <ul id="playlist">
      <li path-data="Noi Tinh Yeu Bat Dau.mp3" data-track="1" class="itemsong">Nơi Tình Yêu Bắt Đầu</li>
      <li path-data="Yeu Lam - Ly Hai.mp3" data-track="2" class="itemsong">Yêu Lầm</li>
      <li path-data="Thu cuoi - Van Quang Long.mp3" data-track="3" class="itemsong">Thu cuối</li>
    </ul>
  </div>
</div>

<script>
$('audio,audio').mediaelementplayer();
$('.itemsong').click(function(){
        var totalTracks=$(".itemsong").length;
        elem=$(this);
        $('#player2').attr("src","<?php echo base_url().'upload/song/';?>"+$(this).attr('path-data'));
        $('#player2').attr("data-current",$(this).attr('data-track'));
        $("#player2").get(0).load();
        $("#player2").get(0).play();
        if($(this).attr("data-current")*1==totalTracks) {
          $('#playlist').scrollTop(elem.offset().top);
        }
          
        if($(this).attr("data-current")==1) {
          $('#playlist').scrollBottom(elem.offset().top);
        }
           
});
var totalTracks=$(".itemsong").length;
totalTracks=totalTracks*1;
$("#player2").bind("ended",function() {
    currentTrack = $("#player2").attr('data-current');
    newTrack = currentTrack*1+1;
    if(newTrack <= totalTracks+1) {
      $("#player2").attr("src","<?php echo base_url().'upload/song/';?>"+$("li[data-track='"+newTrack+"']").attr('path-data'));
      $('#player2').attr("data-current",newTrack);
      $("#player2").get(0).load();
      $("#player2").get(0).play();
    }
});
$('#playlist').slimScroll({
    position: 'right',
    height: 'inherti',
    color: '#f3f3f3',
                    railVisible: true,
                    alwaysVisible: true
});

</script>

 </body>
 </html>